import {Component, EventEmitter, Input, Output} from '@angular/core';
import {NzModalService} from 'ng-zorro-antd/modal';

export type FilterType = 'all' | 'active' | 'completed';
export type OperationType = 'clearCompleted' | 'clearAll' | 'logout';

@Component({
  selector: 'app-todolist-operates',
  standalone: false,
  templateUrl: './todolist-operates.component.html',
  styleUrl: './todolist-operates.component.css'
})
export class TodolistOperatesComponent {
  @Input() currentFilter!: FilterType;
  @Output() todoFilter = new EventEmitter<FilterType>();
  @Output() operateAction = new EventEmitter<OperationType>();
  constructor(private modal: NzModalService) {}
  // currentFilter: FilterType = 'all';

  filterTodos(filterType: FilterType) {
    this.currentFilter = filterType;
    this.todoFilter.emit(filterType);
  }

  performOperation(operation: OperationType) {
    this.operateAction.emit(operation);
  }

  isActiveFilter(filterType: FilterType): boolean {
    return this.currentFilter === filterType;
  }

  deleteAllConfirm(): void {
    this.modal.confirm({
      nzTitle: '请确认',
      nzContent: '<b style="color: red;">确认删除全部事项</b>',
      nzOkText: '确认',
      nzOkType: 'primary',
      nzOkDanger: true,
      nzOnOk: () => this.performOperation('clearAll'),
      nzCancelText: '取消',
      // nzOnCancel: () => console.log('Cancel')
    });
  }

  deleteFinishedConfirm(): void {
    this.modal.confirm({
      nzTitle: '请确认',
      nzContent: '<b style="color: red;">确认删除已完成事项</b>',
      nzOkText: '确认',
      nzOkType: 'primary',
      nzOkDanger: true,
      nzOnOk: () => this.performOperation('clearCompleted'),
      nzCancelText: '取消',
      // nzOnCancel: () => console.log('Cancel')
    });
  }
}
